<template>
	<view class="indexContainer">
		<scroll-view scroll-y="true" class="page">
			<view class="header">
				<view class="search">
					<icon type="search" size="16" />
					<input class="ipt" type="text" placeholder="商品名/品牌/订货号/型号" placeholder-style="color:#ccc">
					<text class="search_text">搜索</text>
				</view>
				<image class="img" src="../../static/dianhua.png" mode=""></image>
			</view>

			<scroll-view scroll-x="true" enable-flex class="navList">
				<view class="navItem active">首页</view>
				<view class="navItem" v-for="(nav,index) in navData" :key="nav.title">{{nav.title}}</view>
			</scroll-view>

			<view class="main">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(swiper,index) in swiperList" :key="swiper.id">
						<view class="swiper-item">
							<image class="swiperImg" :src="swiper.mImage" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
				<image class="img" src="http://image3.vipmro.net/mallAdver/1ede3326-b8c4-4953-83d4-33167281e133.png"
					mode=""></image>
			</view>

			<view class="activity">
				<view class="Coupons" v-for="(coup,index) in couponsList" :key="coup.id">
					<image class="Coupons_img" :src="coup.icon1" mode=""></image>
					<text class="Coupons_text">{{coup.title}}</text>
				</view>
			</view>

			<view class="Snap">
				<view class="Snap_left">
					<image class="Snap_left_img" :src="bannerList.mainImg"></image>
					<view class="Snap_content">
						<image class="Snap_content_img" :src="goodsList.image" mode=""></image>
						<view class="Snap_content_t">
							<text class="Snap_content_text">{{goodsList.goodsName}}</text>
							<text class="Snap_content_text2">{{goodsList.labelName}}</text>
						</view>
					</view>
					<view class="seckill">
						<image class="seckill_img" :src="bannerList.priceImg" mode=""></image>
						<text class="seckill_text">￥{{goodsList.morningPrice}}</text>
					</view>
				</view>
				<view class="seckill_right">
					<view>
						<image class="seckill_right_img" :src="details[0].icon"></image>
						<image class="seckill_right_img" :src="details[1].icon" mode=""></image>
					</view>
					<image class="seckill_rig_img" :src="details[2].icon" mode=""></image>
				</view>
			</view>

			<view class="detailed">
				<view class="detailed_top">
					<image class="detailed_top_img" src="../../static/iconfont/huore.png" mode=""></image>
					<text class="detailed_top_text">{{config.title}}</text>
					<text class="detailed_top_text2"> {{config.subtitle}}</text>
				</view>
				<scroll-view class="list" enable-flex scroll-x="true">
					<view class="detailed_list" v-for="(good,index) in goods" :key="good.goodsId">
						<image class="detailed_list_img" :src="good.goodsImg" mode=""></image>
						<text class="detailed_list_text">{{good.goodsName}}</text>
						<view class="pic">
							<view class="pic_qi">企</view>
							<view class="pic_text">￥{{good.priceMap.salePrice}}</view>
							<view class="pic_text2">{{good.priceMap.price}}</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="selected">
				<view class="selected_title">
					<image class="selected_title_img" src="../../static/iconfont/下载.png" mode=""></image>
					<text class="selected_title_text">产原地精选</text>
				</view>
				<scroll-view class="tool" scroll-x="true" enable-flex>
					<view class="tool_list" v-for="(addr) in addressList" @click="scrollChange(addr)" :key="addr.id">
						<view class="address">{{addr.mainLabel}}</view>
						<text class="tool_dd">{{addr.subLabel}}</text>
					</view>
				</scroll-view>
				<image class="boot_img" :src="advImg?advImg:addressList[0].advImg" mode=""></image>
				
				<view class="floor">
					<view class="floor_left" v-for="(show,index) in showItemData" :key="show.sellerGoodsId">
						<image class="floor_img" :src="show.image" mode=""></image> 

						<view class="floor_boot">
							<view class="floor_text">{{show.title}}</view>
							<view class="floor_pic">
								<view class="icon">企</view>
								<view class="pic">￥{{show.salePrice}}</view>
								<view class="del">{{show.price}}</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				advImg:''
			}
		},
		mounted() {
			this.getNavData(),
				this.getSwiptList(),
				this.getCouponsList(),
				this.getBannerList(),
				this.getAdvList(),
				this.getAddressList(),
				this.getShowItemData()
		},
		methods: {
			getNavData() {
				this.$store.dispatch('home/getNavData')
			},
			getSwiptList() {
				this.$store.dispatch('home/getSwiptList')
			},
			getCouponsList() {
				this.$store.dispatch('home/getCouponsList')
			},
			getBannerList() {
				this.$store.dispatch('home/getBannerList')
			},
			getAdvList() {
				this.$store.dispatch('home/getAdvList')
			},
			getAddressList() {
				this.$store.dispatch('home/getAddressList')
			},
			getShowItemData() {
				this.$store.dispatch('home/getShowItemData')
			},
			scrollChange(attr) {
				this.advImg = attr.advImg
			}
		},
		computed: {
			...mapState('home', ['navData', 'swiperList', 'couponsList', 'bannerList', 'advList', 'addressList',
				'showItemData',
			]),
			...mapGetters('home', ['goodsList', 'details', 'goods', 'config'])
		}
	}
</script>
<style lang="stylus">
.indexContainer
	.page
		.header
			height: 100upx
			background-color: #010932
			padding-top: 20upx 
			display: flex
			.search
				width: 600upx
				height:62upx
				background-color: #EEF0F2
				border-radius: 31upx
				margin: 0 20upx
				display: flex
				padding-left: 20upx
				align-items: center
				.ipt
					font-size: 28upx
					margin-left: 10upx
				.search_text
					margin-left: auto
					margin-right: 30upx
					font-size: 28upx
					font-weight: bold
					color: #fa210a
					white-space: nowrap
			.img
				width: 60upx
				height: 60upx
		.navList
			height: 80upx
			display: flex
			background-color: #010932
			.navItem
				color: #fff
				white-space: nowrap
				margin: 15upx 20upx
				&.active
					font-weight: bold
					font-size: 36upx
					border-bottom: 4upx solid white
		.main
			.swiperImg
				width: 100%
				height: 300upx
			.img
				width: 100%
				height: 76upx
		.activity
			display: flex
			.Coupons
				width: 160upx
				height: 170upx
				display: flex
				flex-direction: column
				.Coupons_img
					width: 86upx
					height: 86upx
					padding: 0 20upx 
				.Coupons_text
					font-size: 20upx
					padding: 20upx 20upx
					white-space: nowrap
		.Snap
			display: flex
			background-color: #f2f2f2
			height: 325upx
			.Snap_left
				width: 355upx
				height: 300upx
				background-color: #ddeafd
				margin: 0 15upx
				border-radius: 20upx
				.Snap_left_img
					width: 200upx
					height: 35upx
					padding: 8upx
				.Snap_content
					display: flex
					.Snap_content_img
						width: 150upx
						height: 150upx
						padding: 8upx
					.Snap_content_t
						width: 180upx
						.Snap_content_text
							font-size: 27upx
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;   
							overflow: hidden; 
							margin: 20upx 10upx
						.Snap_content_text2
							background: linear-gradient(213deg,#fad961,#f76b1c)
							color: #fff
							font-size: 20upx
							padding: 10upx 20upx
				.seckill
					width: 320upx
					background-color: #f62647
					margin: 8upx 8upx
					height: 50upx
					border-radius: 10upx
					display: flex
					align-items: center
					.seckill_img
						width: 150upx
						height: 50upx
					.seckill_text
						width: 180upx
						color: #fff
			.seckill_right
				width: 355upx
				height: 300upx
				.seckill_right_img
					width: 165upx
					height: 160upx
					padding: 4upx
				.seckill_rig_img
					width: 340upx
					height: 110upx
					margin: 8upx 0
		.detailed
			height: 540upx
			margin-top: 20upx 
			.detailed_top
				height: 80upx
				margin-top: 20upx
				display: flex
				.detailed_top_img
					width: 50upx
					height: 50upx
					padding: 10upx 20upx
				.detailed_top_text
					font-size: 32upx
					font-weight: bold
					line-height: 70upx
				.detailed_top_text2
					font-size: 20upx
					color: #999
					padding: 25upx 20upx
			.list
				height: 360upx
				display: flex
				padding: 15upx 20upx	
				.detailed_list
					margin: 0 15upx
					width: 210upx
					.detailed_list_img
						width: 200upx
						height: 200upx
					.detailed_list_text
						font-size: 26upx
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden; 
					.pic
						width: 160upx
						height: 60upx
						margin: 20upx 0
						display: flex
						flex-wrap: wrap
						.pic_qi
							width: 30upx
							height: 35upx
							background-color: red
							color: #fff
							font-size: 24upx
							text-align: center
							border-radius: 8upx
						.pic_text
							width: 120upx
							color: #f62647
							font-size: 28upx
							font-weight: bold
						.pic_text2
							color: #777
							font-size: 20upx
							text-decoration:line-through;
		.selected
			.selected_title
				width: 500upx
				height: 90upx
				display: flex
				align-items: center
				padding-left: 30upx
				.selected_title_img
					width: 40upx
					height: 40upx
					margin-right: 30upx 
				.selected_title_text
					font-size: 34upx
					font-weight: bold
			.tool
				display: flex
				height: 110upx
				.tool_list
					width: 180upx
					height: 120upx
					padding: 10upx 20upx
					.address
						width: 160upx
						height: 40upx
						background-color: #777
						font-size: 24upx
						color: #fff
						line-height: 40upx
						border-radius: 40upx
						text-align: center
					.tool_dd
						color: #777
						font-size: 20upx
						padding-left: 6upx
			.boot_img
				width: 100%
				height: 220upx
			.floor
				background-color: #f2f2f2
				display: flex
				flex-wrap: wrap
				.floor_left
					width: calc(50% - 30upx) 
					height: 540upx
					border-radius: 25upx
					margin: 10upx 15upx		
					background-color: #fff
					.floor_img
						width: 348upx
						height: 348upx
						border-radius: 25upx
					.floor_boot
						padding: 0 10upx
						.floor_text
							font-size: 24upx
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;   /** 多行文本溢出...*/
							overflow: hidden; 
						.floor_pic
							display: flex
							padding-top: 10upx
							.icon
								width: 35upx
								height: 35upx
								background-color: red
								color: #fff
								font-size: 22upx
								text-align: center
								border-radius: 8upx
							.pic
								font-size: 32upx
								padding-left: 10upx
							.del
								padding: 5upx
								font-size: 24upx
								text-decoration:line-through;
</style>